@use './base.scss';
@use './ant.scss';
@use '@boeyo/ui/dist/es/index.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

#app {
  min-width: 100vw;
  min-height: 100vh;
}
::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
  height: 8px; /* 水平滚动条高度 */
}

::-webkit-scrollbar-track {
  background: #4c5c5b; /* 滚动条轨道背景色 */
}

::-webkit-scrollbar-thumb {
  background-color: #829190; /* 滚动条颜色和透明度 */
  // background-color: transparent; /* 滚动条颜色和透明度 */
  border-radius: 4px; /* 圆角效果 */
}
.pro-table {
  .ant-table-body {
    height: var(--pro-table-body-height);
    &::-webkit-scrollbar {
      width: 10px; /* 滚动条宽度 */
      height: 10px; /* 水平滚动条高度 */
    }

    // &::-webkit-scrollbar-corner {
    //   background: transparent;
    // }

    // &::-webkit-scrollbar-track {
    //   background: transparent; /* 滚动条轨道背景色 */
    // }

    // &::-webkit-scrollbar-thumb {
    //   // background-color: rgba(0, 0, 0, 0.3); /* 滚动条颜色和透明度 */
    //   background-color: transparent; /* 滚动条颜色和透明度 */
    //   border-radius: 4px; /* 圆角效果 */
    // }

    &::-webkit-scrollbar-track {
      background: #4c5c5b; /* 滚动条轨道背景色 */
    }

    &::-webkit-scrollbar-corner {
      background: #4c5c5b;
    }
    &::-webkit-scrollbar-thumb {
      // background-color: rgba(0, 0, 0, 0.3); /* 滚动条颜色和透明度 */
      background-color: #829190; /* 滚动条颜色和透明度 */
      border-radius: 4px; /* 圆角效果 */
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: #a2acac; /* 滚动条在悬停时的颜色 */
    }

    &::-webkit-scrollbar-thumb:active {
      background-color: #a2acac; /* 滚动条在激活时的颜色 */
    }

    &::before,
    &::after {
      content: '';
      position: absolute;
      transition: all 0.7s;
      background: #242a39;
      pointer-events: none;
      opacity: 1;
    }
    &:hover {
      &::before,
      &::after {
        opacity: 0;
      }
    }
    &::before {
      width: 100%;
      height: 10px;
      bottom: 0;
    }
    &::after {
      width: 10px;
      right: 0;
      top: 47px;
      bottom: 0;
    }
  }
}

.pro-table-control {
  .ant-card,
  .ant-tree {
    background: transparent !important;
  }
}

.pro-table {
  .ant-table-expanded-row {
    .ant-table-expanded-row-fixed {
      padding: 0 !important;
      margin: 0 !important;
    }
    > .ant-table-cell {
      padding: 0 !important;
    }
    .ant-card-body {
      padding: 0 !important;
    }
  }
  .ant-table-expanded-row .pro-table .ant-table {
    margin-block: 0 !important;
  }
}

.tab-views {
  .ant-tabs-tab {
    padding: 0 !important;
    border: 0 !important;
  }

  .ant-tabs-nav {
    position: relative;
    z-index: 99;
  }

  .custom-tab-bar-style {
    font-size: 14px;
    padding: 0 12px;
    line-height: 28px;
    background-color: #141c28;
    color: #cccccc;
    box-shadow: 0px 0px 12px 0px rgba(162, 196, 252, 0.1);
    border-radius: 4px 4px 0 0;
    border: 1px solid #3f4b5f;
  }

  .ant-tabs-tab-active {
    .custom-tab-bar-style {
      background-color: #242d3e;
      border-bottom-color: transparent;
      color: #fff;
    }
  }

  .ant-tabs-nav {
    margin-bottom: 0;
    background: transparent;
  }
}

.leaflet-icon {
  &.success {
    color: rgb(149, 255, 132);
    fill: rgb(149, 255, 132);
    stroke: rgb(149, 255, 132);
  }
  &.warn {
    color: rgb(255, 219, 89);
    fill: rgb(255, 219, 89);
    stroke: rgb(255, 219, 89);
  }
  &.danger {
    color: rgb(255, 120, 137);
    fill: rgb(255, 120, 137);
    stroke: rgb(255, 120, 137);
  }
}

.table-container {
  font-size: 14px;
  border-collapse: collapse;
  width: 100%;
  caption {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    font-weight: bold;
  }
  thead th {
    font-weight: bold;
  }
  thead th,
  tbody th {
    padding: 8px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.4);
  }
}

input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  transition: background-color 50000s ease-in-out 0s;
  -webkit-background-clip: text;
}

.pro-search-form-wrap {
  .ant-picker {
    width: 100%;
  }
}

.pro-menu {
  padding-block: 30px;
}

// 卡片样式
.card-container {
  position: relative;
  background-color: rgba(0, 0, 0, 0.36);
  border-radius: 12px;
  padding: 20px;
}
